<template>
	<view class="content">
		<view class="header">
			<view class="nav"></view>
			<view class="operation">
				<view class="left"><u-icon name="arrow-left" size="24px" color="#fff" @click="toBack()"></u-icon></view>
				<view class="center123">收益</view>
				<view class="right"></view>
			</view>
		</view>
		<view class="condition">
			<view class="item" :class="{ itemActive: statusVal == 0 }" @click="changetabsnew(0)">排队</view>
			<view class="item" :class="{ itemActive: statusVal == 1 }" @click="changetabsnew(1)">推广</view>
			<view class="item" :class="{ itemActive: statusVal == 2 }" @click="changetabsnew(2)">新用户</view>
		</view>
		<view class="zuidi">
			<view class="screen">
				<view class="left88">总计</view>
				<view class="right88">
					<text style="font-size: 36rpx;font-weight: 800;color:#f54047 ;margin-top: 8rpx;">￥</text>
					<text style="font-size: 44rpx;font-weight: bold;">{{ totalAmount }}</text>
					<text style="font-size: 36rpx;font-weight: 800;margin-top: 8rpx;">元</text>
				</view>
			</view>
			<view class="screen" @click="DatePicker('range')">
				<view class="left88"><image src="https://wanxian-test.oss-cn-shenzhen.aliyuncs.com/%E6%97%A5%E5%8E%86%E6%97%A5%E6%9C%9F.png"></image></view>
				<view class="right88">
					<text style="font-size: 24rpx;font-weight: bold; color: rgb(150, 176, 187);margin-top: 20rpx;" v-show="dateFlag">{{ range[0] }} - {{ range[1] }}</text>
					<text style="font-size: 36rpx;font-weight: bold; color: rgb(150, 176, 187);margin-top: 20rpx;" v-show="!dateFlag">今日</text>
				</view>
			</view>
		</view>

		<view class="list">
			<scroll-view scroll-y="true">
			<view class="list_item" v-if="records.length > 0" v-for="(item, index) in records" :key="index">
				<view class="left77">
					<text style="font-size: 36rpx;font-weight: bold;line-height: 158rpx;">{{ item.amount }}</text>
					<text style="font-size: 24rpx;font-weight: 800;">元</text>
				</view>
				<view class="right77">{{ item.createDate }}</view>
			</view>
			<view class="empty" v-else>暂时没有数据哦</view>
			</scroll-view>
		</view>
		<mx-date-picker
			:show="showPicker"
			:type="type"
			:value="value"
			:show-tips="true"
			:begin-text="'开始'"
			:end-text="'结束'"
			:show-seconds="true"
			@confirm="ed"
			@cancel="cancel"
		/>
		<!-- 	<view class="total_profit">
				<view class="top777">
					<image src="https://wanxian-test.oss-cn-shenzhen.aliyuncs.com/433258.png"></image>
					<text>总收益</text>
				</view>
				<view class="button777">
					<text style="font-size: 44rpx;font-weight: bold;color: #fff;">666689</text>
					<text style="font-size: 28rpx;color: #fff;margin-top: 18rpx;">元</text>
				</view>
			</view> -->
	</view>
</template>

<script>
import MxDatePicker from '@/activePages/compnents/mx-datepicker/mx-datepicker.vue';
import { getRevenuePartDetailPageApi } from '@/api/results.js';
export default {
	components: {
		MxDatePicker
	},
	data() {
		return {
			statusVal: 0,
			showPicker: false,
			type: 'rangetime',
			value: '',
			range: ['', ''],
			dateFlag: false,
			pageIndex: 0,
			currentSize:0,
			pageSize: 1,
			totals: 0,
			totalAmount: 0,
			records: []
		};
	},
	onLoad() {
		let cur_time = this.getNowFormatDate();
		this.range[0] = cur_time;
		this.range[1] = cur_time;
		this.records=[];
		this.getRevenuePartDetailPage();
	},

	methods: {
		onReachBottom() {
			this.currentSize = (this.pageIndex+1) * this.pageSize;
			// console.log(this.pageSize)
			if (this.currentSize >= this.totals) {
				return;
			} else {
				this.pageIndex++;
				this.getRevenuePartDetailPage();
				console.log('我滚动到底部了');
			}
		},
		//获取收益记录
		async getRevenuePartDetailPage() {
			let params = {
				pageIndex: this.pageIndex,
				pageSize: this.pageSize,
				type: this.statusVal,
				startTime: this.range[0].replaceAll("/","-"),
				endTime: this.range[1].replaceAll("/","-")
			};
			const res = await getRevenuePartDetailPageApi(params);
			console.log(99696, res);
			if (res.statusCode == 200) {
				this.totalAmount = res.data.data.totalAmount;
				this.totals=res.data.data.total;
				let recordsnew=res.data.data.records;
				if(recordsnew){
					this.records=this.records.concat(recordsnew);
					console.log(9898, this.records);
				}
			}
		},
		getNowFormatDate() {
			var date = new Date();
			var seperator1 = '-';
			var year = date.getFullYear();
			var month = date.getMonth() + 1;
			var strDate = date.getDate();
			if (month >= 1 && month <= 9) {
				month = '0' + month;
			}
			if (strDate >= 0 && strDate <= 9) {
				strDate = '0' + strDate;
			}
			var currentdate = year + seperator1 + month + seperator1 + strDate;
			return currentdate;
		},
		toBack() {
			uni.navigateBack({
				delta: 1
			});
		},
		changetabsnew(val) {
			this.statusVal = val;
			this.$forceUpdate();
			this.records = [];
			this.getRevenuePartDetailPage();
		},
		DatePicker(type) {
			//显示
			this.type = type;
			this.showPicker = true;
			this.value = this[type];
		},
		cancel() {
			//选择
			this.showPicker = false;
			this.dateFlag = false;
		},
		ed(e) {
			//选择
			this.showPicker = false;
			if (e) {
				this[this.type] = e.value;
				//选择的值
				console.log('value => ' + e.value);
				//原始的Date对象
				console.log('date => ' + e.date);
				this.dateFlag = true;
				this.records = [];
				this.getRevenuePartDetailPage();
				this.$forceUpdate();
			}
		}
	}
};
</script>
<style>
page {
	background-color: rgb(255, 255, 255);
	background-size: 100%;
}
</style>
<style lang="scss" scoped>
.content {
	text-align: center;
	align-items: center;
	.header {
		min-height: 150rpx;
		background: url(https://wanxian-test.oss-cn-shenzhen.aliyuncs.com/885623.png);
		.nav {
			height: var(--status-bar-height);
		}
		.operation {
			height: 140rpx;
			display: flex;
			justify-content: space-between;
			margin: auto 60rpx auto 30rpx;
			.left {
				height: 140rpx;
				text-align: center;
				line-height: 140rpx;
				padding-top: 10rpx;
				justify-content: center;
			}
			.center123 {
				height: 140rpx;
				text-align: center;
				line-height: 140rpx;
				font-size: 36rpx;
				font-weight: 500;
				justify-content: center;
				color: #fff;
			}
			.right {
				height: 140rpx;
				text-align: center;
				line-height: 140rpx;
			}
		}
	}
	.condition {
		height: 80rpx;

		// box-shadow: 0px 10rpx 20rpx 0rpx rgba(0, 0, 0, 0.1);
		z-index: 10;

		// margin-top: -80rpx;
		display: flex;
		justify-content: space-between;
		margin-left: 10%;
		margin-right: 10%;
		.item {
			height: 80rpx;
			line-height: 80rpx;
			width: 100rpx;
			font-size: 28rpx;
			font-family: 'PingFang';
			color: rgb(14, 27, 36);
			text-transform: uppercase;
			font-weight: 800;
		}
		.itemActive {
			height: 80rpx;
			line-height: 80rpx;
			width: 100rpx;
			border-bottom: 8rpx solid #0e1b24;
			font-size: 28rpx;
			font-family: 'PingFang';
			// color: rgb(14, 27, 36);
			text-transform: uppercase;
			font-weight: 800;
		}
	}
	.zuidi {
		height: 150rpx;
		display: flex;
		justify-content: space-between;
		margin-top: 20rpx;
		margin-left: 30rpx;
		margin-right: 30rpx;
		.screen {
			height: 150rpx;
			width: 49%;
			justify-content: space-between;
			align-items: center;
			background-color: #f2f5fc;
			border-radius: 16rpx;
			.left88 {
				height: 75rpx;
				font-size: 36rpx;
				color: #f54047;
				font-weight: 800;
				line-height: 75rpx;
				image {
					height: 65rpx;
					width: 65rpx;
					margin-top: 8rpx;
				}
			}
			.right88 {
				height: 75rpx;
				color: #f54047;
				font-weight: bold;
				display: flex;
				justify-content: center;
			}
		}
	}
	.screen {
		height: 150rpx;
		width: 49%;
		justify-content: space-between;
		align-items: center;
		background-color: #f2f5fc;
		border-radius: 16rpx;
		.left88 {
			height: 75rpx;
			font-size: 36rpx;
			color: #f54047;
			font-weight: 800;
			line-height: 75rpx;
		}
		.right88 {
			height: 75rpx;
			color: #f54047;
			font-weight: bold;
			display: flex;
			justify-content: center;
		}
	}
	.list {
		padding-top: 15rpx;
		min-height: 900rpx;

		margin-top: 15rpx;
		.list_item {
			height: 158rpx;
			border-radius: 6rpx;
			background-color: rgb(255, 255, 255);
			box-shadow: 0rpx 5rpx 20rpx 0rpx rgba(0, 0, 0, 0.1);
			margin: auto 30rpx 15rpx 30rpx;
			display: flex;
			.left77 {
				height: 158rpx;
				width: 30%;
				background: url(https://wanxian-test.oss-cn-shenzhen.aliyuncs.com/momeney.png);
				border-bottom-left-radius: 16rpx;
				justify-content: center;
			}
			.right77 {
				height: 158rpx;
				width: 70%;
				line-height: 158rpx;
				color: #266de2;
			}
		}
		.empty {
			height: 158rpx;
		}
	}
	.total_profit {
		height: 100rpx;
		width: 600rpx;
		// position: absolute;
		// top: 14%;
		// left: 10%;

		.top777 {
			height: 50rpx;
			display: flex;
			color: #fff;
			font-size: 26rpx;

			image {
				height: 35rpx;
				width: 35rpx;
				border-radius: 50%;
				margin-right: 8rpx;
			}
		}
		.button777 {
			height: 50rpx;
			display: flex;
		}
	}
}
</style>
